<template>
	<view class="container">
		<!-- 头部图片轮播 -->
		<view class="header-swiper">
			<swiper class="swiper" indicator-dots circular autoplay interval="3000" duration="500">
				<swiper-item v-for="(image, index) in hotelInfo.images" :key="index">
					<image :src="image" mode="aspectFill" class="swiper-image"></image>
				</swiper-item>
			</swiper>
			
			<!-- 返回按钮 -->
			<view class="back-btn" @click="goBack">
				<u-icon name="arrow-left" color="#fff" size="24"></u-icon>
			</view>
			
			<!-- 右上角功能按钮 -->
			<!-- <view class="header-actions">
				<view class="action-btn" @click="toggleFavorite">
					<u-icon :name="hotelInfo.isFavorite ? 'heart-fill' : 'heart'" color="#fff" size="24"></u-icon>
				</view>
				<view class="action-btn" @click="shareHotel">
					<u-icon name="share" color="#fff" size="24"></u-icon>
				</view>
				<view class="action-btn">
					<u-icon name="more-dot-fill" color="#fff" size="24"></u-icon>
				</view>
			</view> -->
			
			<!-- 图片指示器 -->
			<view class="image-indicator">
				<text>{{ currentImageIndex + 1 }}/{{ hotelInfo.images.length }}</text>
			</view>
		</view>

		<!-- 酒店基本信息 -->
		<view class="hotel-basic-info">
			<view class="hotel-name">{{ hotelInfo.name }}</view>
			<view class="hotel-type">{{ hotelInfo.type }} {{ hotelInfo.openYear }}年开业</view>
			
			<!-- 评分和评价 -->
			<view class="rating-section">
				<view class="rating-box">
					<text class="rating">{{ hotelInfo.rating }}</text>
					<text class="rating-label">超棒</text>
					<text class="review-count">{{ hotelInfo.reviewCount }}条</text>
				</view>
				
				<!-- 服务标签 -->
				<view class="service-tags">
					<view class="tag" v-for="(tag, index) in hotelInfo.services" :key="index">
						<u-icon :name="tag.icon" size="16" color="#fa436a"></u-icon>
						<text>{{ tag.name }}</text>
					</view>
					<view class="more-services" @click="showMoreServices">
						<text>{{ moreServicesCount }}项</text>
						<u-icon name="arrow-right" size="14" color="#666"></u-icon>
					</view>
				</view>
			</view>
			
			<!-- 位置信息 -->
			<view class="location-section">
				<view class="distance-info">
					<u-icon name="map" color="#fa436a" size="16"></u-icon>
					<text class="distance">距您步行{{ hotelInfo.walkDistance }} · 距{{ hotelInfo.nearbyLandmark }}</text>
				</view>
				<view class="address">{{ hotelInfo.address }}</view>
				<!-- <view class="map-btn" @click="showMap">
					<u-icon name="map" color="#fa436a" size="20"></u-icon>
					<text>地图</text>
				</view> -->
			</view>
			
			<!-- 优惠信息 -->
			<view class="promotion-section">
				<view class="promotion-item" v-for="(promo, index) in hotelInfo.promotions" :key="index">
					<text class="promo-text">{{ promo }}</text>
				</view>
				<view class="all-promos" @click="showAllPromotions">
					<text>全部</text>
					<u-icon name="arrow-right" size="14" color="#fa436a"></u-icon>
				</view>
			</view>
		</view>

		<!-- 预订信息 -->
		<view class="booking-section">
			<view class="section-title">预订</view>
			<view class="booking-info" @click="showDatePicker">
				<view class="date-info">
					<view class="date-item">
						<text class="date-label">{{ checkInDate }}</text>
						<text class="day-label">今天</text>
					</view>
					<view class="nights-count">
						<text>-{{ nightsCount }}晚-</text>
					</view>
					<view class="date-item">
						<text class="date-label">{{ checkOutDate }}</text>
						<text class="day-label">明天</text>
					</view>
				</view>
				<!-- <view class="guest-info">
					<text>{{ guestCount }}间 · {{ guestCount }}人</text>
				</view> -->
			</view>
			
			<!-- 会员等级 -->
			<view class="membership-section">
				<view class="member-tag">
					<u-icon name="home" color="#orange" size="16"></u-icon>
					<text>美团住吧</text>
				</view>
				<view class="member-tag">
					<u-icon name="star" color="#orange" size="16"></u-icon>
					<text>普通会员</text>
				</view>
				<view class="room-types">
					<text>大床房</text>
					<text>双床</text>
					<text class="selected">筛选</text>
				</view>
			</view>
		</view>

		<!-- 房型列表 -->
		<view class="room-section">
			<view class="room-item" v-for="(room, index) in roomList" :key="index">
				<view class="room-image">
					<image :src="room.image" mode="aspectFill"></image>
				</view>
				<view class="room-info">
					<view class="room-name">{{ room.name }}</view>
					<view class="room-details">
						<text>{{ room.bedType }}</text>
						<text>{{ room.area }}</text>
						<text>{{ room.capacity }}</text>
					</view>
					<view class="room-features">
						<text v-if="room.hasBreakfast">无早餐</text>
						<text v-if="room.canCancel">{{ room.cancelPolicy }}</text>
					</view>
					<view class="room-price">
						<text class="price">¥{{ room.price }}</text>
						<view class="book-btn" @click="bookRoom(room)">
							<text>立即预订</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 日历组件 -->
		<u-calendar 
			:show="calendarVisible" 
			mode="range"
			startText="入住" 
			endText="离店" 
			confirmDisabledText="请选择离店日期"
			@confirm="confirm" 
			@close="calendarVisible = false"
			ref="calendar">
		</u-calendar>

		<!-- 预订确认弹窗 -->
		<u-popup 
			:show="showBookingModal" 
			mode="bottom" 
			height="80%"
			border-radius="20" 
			@close="showBookingModal = false"
			closeable>
			<view class="booking-modal">
				<view class="modal-header">
					<text class="hotel-title">{{ hotelInfo.name }}</text>
				</view>

				<!-- 整晚留房提示 -->
				<view class="stay-notice">
					<u-icon name="info-circle" color="#1890ff" size="18"></u-icon>
					<text>整晚留房 预订成功后，酒店将为您整晚留房！</text>
				</view>

				<!-- 日期信息 -->
				<view class="date-summary">
					<text class="date-text">{{ checkInDate }}今天 - {{ checkOutDate }}明天 {{ nightsCount }}晚</text>
					<view class="room-type-link" @click="showRoomTypes">
						<text>房型详情</text>
						<u-icon name="arrow-right" size="14" color="#fa436a"></u-icon>
					</view>
				</view>

				<!-- 房型信息 -->
				<view class="selected-room-info">
					<view class="room-title">{{ selectedRoom.name }}</view>
					<view class="room-features">
						<text>{{ selectedRoom.bedType }}</text>
						<text v-if="selectedRoom.area">{{ selectedRoom.area }}</text>
						<text v-if="selectedRoom.capacity">{{ selectedRoom.capacity }}</text>
						<text v-if="!selectedRoom.hasBreakfast">无早餐</text>
						<text v-if="selectedRoom.hasWindow">飘窗</text>
						<text v-if="selectedRoom.smokingPolicy">部分禁烟</text>
					</view>
				</view>

				<!-- 取消政策 -->
				<view class="policy-section">
					<view class="policy-item">
						<u-icon name="checkmark-circle" color="#52c41a" size="16"></u-icon>
						<text>30分钟内可免费取消</text>
					</view>
					<view class="policy-item">
						<u-icon name="clock" color="#fa8c16" size="16"></u-icon>
						<text>预订5分钟确认</text>
						<u-icon name="arrow-right" size="12" color="#666"></u-icon>
					</view>
				</view>

				<!-- 身份证要求 -->
				<view class="id-requirement">
					<text>仅接待持有中国内地签发的有效居民身份证的客人</text>
					<view class="booking-rules" @click="showBookingRules">
						<text>订房必读</text>
						<u-icon name="arrow-right" size="14" color="#fa436a"></u-icon>
					</view>
				</view>

				<!-- 入住信息 -->
				<view class="guest-info-section">
					<view class="section-title">入住信息</view>
					
					<!-- 房间数量 -->
					<view class="form-item">
						<text class="label">房间数量</text>
						<view class="room-count-selector">
							<text>{{ roomCount }}间 (每间最多住{{ maxGuestsPerRoom }}人)</text>
							<u-icon name="arrow-down" size="14" color="#666"></u-icon>
						</view>
					</view>

					<!-- 住客姓名 -->
					<view class="form-item">
						<text class="label">住客姓名</text>
						<u-input 
							v-model="guestName" 
							placeholder="每间填1位住客姓名"
							border="none"
							class="guest-input">
						</u-input>
						<u-icon name="account" color="#1890ff" size="20"></u-icon>
					</view>

					<!-- 联系手机 -->
					<view class="form-item">
						<text class="label">联系手机</text>
						<view class="phone-input">
							<text class="country-code">86</text>
							<u-icon name="arrow-down" size="12" color="#666"></u-icon>
							<u-input 
								v-model="phoneNumber" 
								placeholder="用于接收通知短信"
								border="none"
								class="phone-field">
							</u-input>
						</view>
						<u-icon name="phone" color="#1890ff" size="20"></u-icon>
					</view>

					<!-- 预计到店 -->
					<view class="form-item" @click="showArrivalTime">
						<text class="label">预计到店</text>
						<view class="arrival-time">
							<text>{{ arrivalTime }} {{ arrivalNote }}</text>
							<u-icon name="arrow-right" size="14" color="#666"></u-icon>
						</view>
					</view>
				</view>

				<!-- 底部确认按钮 -->
				<view class="modal-footer">
					<view class="price-info">
						<text class="total-price">¥{{ selectedRoom.price }}</text>
						<text class="price-note">共1间，1晚</text>
					</view>
					<view class="confirm-booking-btn" @click="confirmBooking">
						<text>确认预订</text>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 底部占位 -->
		<view class="bottom-placeholder"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentImageIndex: 0,
			checkInDate: '06月25日',
			checkOutDate: '06月26日',
			nightsCount: 1,
			guestCount: 1,
			moreServicesCount: 2,
			calendarVisible: false,
			showBookingModal: false,
			selectedRoom: {},
			roomCount: 1,
			maxGuestsPerRoom: 2,
			guestName: '',
			phoneNumber: '',
			arrivalTime: '21:00',
			arrivalNote: '房间将整晚保留',
			hotelInfo: {
				name: '逸·享家Funny电玩酒店(济南西客站)',
				type: '经济型',
				openYear: '2022',
				rating: 5.0,
				reviewCount: 2209,
				walkDistance: '1.2公里',
				nearbyLandmark: '济南西站地铁站驾车2.3公里',
				address: '西客站地区·烟台路保利中...',
				isFavorite: false,
				images: [
					'/static/temp/hotel1.jpg',
					'/static/temp/hotel2.jpg', 
					'/static/temp/hotel3.jpg',
					'/static/temp/hotel4.jpg'
				],
				services: [
					{ name: '免费行李寄存', icon: 'bag' },
					{ name: '洗衣服务', icon: 'wash' }
				],
				promotions: [
					'住就送外卖券',
					'支付红包¥50',
					'支付红包¥10'
				]
			},
			roomList: [
				{
					id: 1,
					name: '酒店房间+济南惟幕开啦塔像艺术体验馆门票',
					image: '/static/temp/room1.jpg',
					bedType: '房间可选',
					area: '门票可选',
					capacity: '',
					hasBreakfast: false,
					canCancel: true,
					cancelPolicy: '',
					hasWindow: true,
					smokingPolicy: true,
					price: 192
				},
				{
					id: 2,
					name: '商务双床房',
					image: '/static/temp/room2.jpg',
					bedType: '双床',
					area: '25-35㎡',
					capacity: '2人入住',
					hasBreakfast: false,
					canCancel: true,
					cancelPolicy: '30分钟内可免费取消',
					hasWindow: true,
					smokingPolicy: true,
					price: 168
				}
			]
		}
	},
	onLoad(options) {
		// 获取传入的酒店信息
		if (options.hotelId) {
			this.loadHotelDetail(options.hotelId);
		}
	},
	methods: {
		confirm(value) {
			// 处理日历选择
			console.log('选择的日期:', value);
			this.calendarVisible = false;
			
			if (value && value.length >= 2) {
				const startDate = new Date(value[0]);
				const endDate = new Date(value[1]);
				
				this.checkInDate = `${(startDate.getMonth() + 1).toString().padStart(2, '0')}月${startDate.getDate().toString().padStart(2, '0')}日`;
				this.checkOutDate = `${(endDate.getMonth() + 1).toString().padStart(2, '0')}月${endDate.getDate().toString().padStart(2, '0')}日`;
				
				// 计算天数
				const timeDiff = endDate.getTime() - startDate.getTime();
				this.nightsCount = Math.ceil(timeDiff / (1000 * 3600 * 24));
			}
		},
		loadHotelDetail(hotelId) {
			// 模拟加载酒店详情数据
			console.log('加载酒店详情:', hotelId);
		},
		goBack() {
			uni.navigateBack();
		},
		toggleFavorite() {
			this.hotelInfo.isFavorite = !this.hotelInfo.isFavorite;
			uni.showToast({
				title: this.hotelInfo.isFavorite ? '已收藏' : '已取消收藏',
				icon: 'none'
			});
		},
		shareHotel() {
			uni.showToast({
				title: '分享功能',
				icon: 'none'
			});
		},
		showMoreServices() {
			uni.showToast({
				title: '查看更多服务',
				icon: 'none'
			});
		},
		showMap() {
			uni.showToast({
				title: '查看地图',
				icon: 'none'
			});
		},
		showAllPromotions() {
			uni.showToast({
				title: '查看全部优惠',
				icon: 'none'
			});
		},
		bookRoom(room) {
			this.selectedRoom = room;
			this.showBookingModal = true;
		},
		showDatePicker() {
			this.calendarVisible = true;
		},
		showRoomTypes() {
			uni.showToast({
				title: '房型详情',
				icon: 'none'
			});
		},
		showBookingRules() {
			uni.showToast({
				title: '订房必读',
				icon: 'none'
			});
		},
		showArrivalTime() {
			uni.showActionSheet({
				itemList: ['14:00-18:00', '18:00-21:00', '21:00-24:00', '凌晨后到店'],
				success: (res) => {
					const times = ['14:00-18:00', '18:00-21:00', '21:00', '凌晨'];
					const notes = ['', '', '房间将整晚保留', '房间将整晚保留'];
					this.arrivalTime = times[res.tapIndex];
					this.arrivalNote = notes[res.tapIndex];
				}
			});
		},
		confirmBooking() {
			if (!this.guestName.trim()) {
				uni.showToast({
					title: '请填写住客姓名',
					icon: 'none'
				});
				return;
			}
			if (!this.phoneNumber.trim()) {
				uni.showToast({
					title: '请填写联系手机',
					icon: 'none'
				});
				return;
			}
			
			// 模拟预订成功
			this.showBookingModal = false;
			uni.showToast({
				title: '预订成功！',
				icon: 'success'
			});
			
			// 这里可以跳转到订单页面
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/order/order'
				});
			}, 1500);
		}
	}
}
</script>

<style lang="scss">
page {
	background: #f5f5f5;
}

.container {
	min-height: 100vh;
}

/* 头部图片轮播 */
.header-swiper {
	position: relative;
	height: 500upx;

	.swiper {
		width: 100%;
		height: 100%;

		.swiper-image {
			width: 100%;
			height: 100%;
		}
	}

	.back-btn {
		position: absolute;
		top: 60upx;
		left: 30upx;
		width: 64upx;
		height: 64upx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}

	.header-actions {
		position: absolute;
		top: 60upx;
		right: 30upx;
		display: flex;
		gap: 20upx;
		z-index: 10;

		.action-btn {
			width: 64upx;
			height: 64upx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.image-indicator {
		position: absolute;
		bottom: 30upx;
		right: 30upx;
		padding: 8upx 16upx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 20upx;

		text {
			color: #fff;
			font-size: 24upx;
		}
	}
}

/* 酒店基本信息 */
.hotel-basic-info {
	background: #fff;
	padding: 30upx;
	margin-bottom: 20upx;

	.hotel-name {
		font-size: 36upx;
		font-weight: 600;
		color: #303133;
		line-height: 1.4;
		margin-bottom: 12upx;
	}

	.hotel-type {
		font-size: 24upx;
		color: #666;
		margin-bottom: 24upx;
	}

	.rating-section {
		margin-bottom: 24upx;

		.rating-box {
			display: flex;
			align-items: center;
			margin-bottom: 20upx;

			.rating {
				font-size: 48upx;
				font-weight: 600;
				color: #fa436a;
				margin-right: 12upx;
			}

			.rating-label {
				font-size: 28upx;
				color: #fa436a;
				margin-right: 12upx;
			}

			.review-count {
				font-size: 24upx;
				color: #666;
			}
		}

		.service-tags {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 20upx;

			.tag {
				display: flex;
				align-items: center;
				gap: 8upx;

				text {
					font-size: 24upx;
					color: #303133;
				}
			}

			.more-services {
				display: flex;
				align-items: center;
				gap: 4upx;

				text {
					font-size: 24upx;
					color: #666;
				}
			}
		}
	}

	.location-section {
		.distance-info {
			display: flex;
			align-items: center;
			margin-bottom: 12upx;

			.distance {
				font-size: 28upx;
				color: #303133;
				margin-left: 8upx;
			}
		}

		.address {
			font-size: 24upx;
			color: #666;
			margin-bottom: 20upx;
		}

		.map-btn {
			display: flex;
			align-items: center;
			gap: 8upx;

			text {
				font-size: 28upx;
				color: #fa436a;
			}
		}
	}

	.promotion-section {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 20upx;
		margin-top: 24upx;
		padding-top: 24upx;
		border-top: 1px solid #f0f0f0;

		.promotion-item {
			padding: 8upx 16upx;
			background: #fff2f2;
			border: 1px solid #fa436a;
			border-radius: 20upx;

			.promo-text {
				font-size: 22upx;
				color: #fa436a;
			}
		}

		.all-promos {
			display: flex;
			align-items: center;
			gap: 4upx;

			text {
				font-size: 24upx;
				color: #fa436a;
			}
		}
	}
}

/* 预订信息 */
.booking-section {
	background: #fff;
	padding: 30upx;
	margin-bottom: 20upx;

	.section-title {
		font-size: 32upx;
		font-weight: 600;
		color: #303133;
		margin-bottom: 24upx;
	}

	.booking-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24upx;

		.date-info {
			width: 100%;
			display: flex;
			gap: 60upx;
			align-items: center;
			justify-content: center;

			.date-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.date-label {
					font-size: 28upx;
					color: #303133;
					margin-bottom: 8upx;
				}

				.day-label {
					font-size: 22upx;
					color: #666;
				}
			}

			.nights-count {
				text {
					font-size: 24upx;
					color: #666;
				}
			}
		}

		.guest-info {
			text {
				font-size: 28upx;
				color: #303133;
			}
		}
	}

	.membership-section {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.member-tag {
			display: flex;
			align-items: center;
			gap: 6upx;
			padding: 8upx 16upx;
			background: #fff8e1;
			border-radius: 20upx;

			text {
				font-size: 22upx;
				color: #f57c00;
			}
		}

		.room-types {
			display: flex;
			align-items: center;
			gap: 20upx;

			text {
				font-size: 24upx;
				color: #666;

				&.selected {
					color: #fa436a;
				}
			}
		}
	}
}

/* 房型列表 */
.room-section {
	background: #fff;

	.room-item {
		display: flex;
		padding: 30upx;
		border-bottom: 1px solid #f0f0f0;

		&:last-child {
			border-bottom: none;
		}

		.room-image {
			width: 160upx;
			height: 120upx;
			margin-right: 24upx;
			border-radius: 12upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.room-info {
			flex: 1;

			.room-name {
				font-size: 28upx;
				color: #303133;
				font-weight: 500;
				line-height: 1.4;
				margin-bottom: 12upx;
			}

			.room-details {
				display: flex;
				gap: 20upx;
				margin-bottom: 8upx;

				text {
					font-size: 22upx;
					color: #666;
				}
			}

			.room-features {
				display: flex;
				gap: 20upx;
				margin-bottom: 16upx;

				text {
					font-size: 22upx;
					color: #666;
				}
			}

			.room-price {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.price {
					font-size: 36upx;
					color: #fa436a;
					font-weight: 600;
				}

				.unit {
					font-size: 24upx;
					color: #fa436a;
					margin-left: 4upx;
				}

				.book-btn {
					padding: 12upx 24upx;
					background: #fa436a;
					border-radius: 24upx;

					text {
						font-size: 24upx;
						color: #fff;
						font-weight: 500;
					}
				}
			}
		}
	}
}

.bottom-placeholder {
	height: 60upx;
}

/* 预订弹窗样式 */
.booking-modal {
	padding: 30upx;
	background: #fff;
	max-height: 100%;
	overflow-y: auto;

	.modal-header {
		text-align: center;
		padding-bottom: 20upx;
		border-bottom: 1px solid #f0f0f0;
		margin-bottom: 24upx;

		.hotel-title {
			font-size: 32upx;
			font-weight: 600;
			color: #303133;
		}
	}

	.stay-notice {
		display: flex;
		align-items: center;
		gap: 12upx;
		padding: 16upx 20upx;
		background: #e6f7ff;
		border-radius: 12upx;
		margin-bottom: 24upx;

		text {
			font-size: 24upx;
			color: #1890ff;
		}
	}

	.date-summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24upx;

		.date-text {
			font-size: 28upx;
			color: #303133;
			font-weight: 500;
		}

		.room-type-link {
			display: flex;
			align-items: center;
			gap: 4upx;

			text {
				font-size: 24upx;
				color: #fa436a;
			}
		}
	}

	.selected-room-info {
		margin-bottom: 24upx;

		.room-title {
			font-size: 30upx;
			color: #303133;
			font-weight: 500;
			margin-bottom: 12upx;
		}

		.room-features {
			display: flex;
			flex-wrap: wrap;
			gap: 16upx;

			text {
				font-size: 24upx;
				color: #666;
				padding: 4upx 0;
			}
		}
	}

	.policy-section {
		margin-bottom: 24upx;

		.policy-item {
			display: flex;
			align-items: center;
			gap: 12upx;
			padding: 12upx 0;

			text {
				font-size: 24upx;
				color: #303133;
			}
		}
	}

	.id-requirement {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx;
		background: #f8f8f8;
		border-radius: 12upx;
		margin-bottom: 24upx;

		text {
			font-size: 24upx;
			color: #666;
			flex: 1;
		}

		.booking-rules {
			display: flex;
			align-items: center;
			gap: 4upx;

			text {
				font-size: 24upx;
				color: #fa436a;
			}
		}
	}

	.guest-info-section {
		.section-title {
			font-size: 32upx;
			font-weight: 600;
			color: #303133;
			margin-bottom: 24upx;
		}

		.form-item {
			display: flex;
			align-items: center;
			padding: 20upx 0;
			border-bottom: 1px solid #f0f0f0;

			.label {
				width: 160upx;
				font-size: 28upx;
				color: #303133;
				flex-shrink: 0;
			}

			.room-count-selector {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex: 1;

				text {
					font-size: 28upx;
					color: #303133;
				}
			}

			.guest-input {
				flex: 1;
			}

			.phone-input {
				display: flex;
				align-items: center;
				flex: 1;
				gap: 8upx;

				.country-code {
					font-size: 28upx;
					color: #303133;
					padding: 8upx 12upx;
					background: #f8f8f8;
					border-radius: 8upx;
				}

				.phone-field {
					flex: 1;
				}
			}

			.arrival-time {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex: 1;

				text {
					font-size: 28upx;
					color: #303133;
				}
			}
		}
	}

	.modal-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30upx 0 20upx;
		margin-top: 40upx;
		border-top: 1px solid #f0f0f0;

		.price-info {
			display: flex;
			flex-direction: column;

			.total-price {
				font-size: 36upx;
				color: #fa436a;
				font-weight: 600;
			}

			.price-note {
				font-size: 22upx;
				color: #666;
				margin-top: 4upx;
			}
		}

		.confirm-booking-btn {
			padding: 16upx 40upx;
			background: #fa436a;
			border-radius: 30upx;

			text {
				font-size: 28upx;
				color: #fff;
				font-weight: 500;
			}
		}
	}
}
</style> 